<template>
  <div id="headBox" class="pageNormalBackground">
    <headerT title="个人资料" />
    <div class="headMarginTop boxMain" style="height:100vh">
      <div class="everyBlockBgcolor everyPadding displayFlex headImg">
        <p>修改头像</p>
        <div class="displayFlex userImgBox">
          <div class="displayFlex user-header">
            <form enctype="multipart/form-data">
              <input
                id="file"
                type="file"
                name="image"
                @change="onchangeImgFun"
                accept="image/*"
                class="header-upload-btn"
              />
              <img class="userImg" v-if='userInfo.img!=null' :src="userInfo.img" alt='' />
              <img class="userImg" v-if='userInfo.img==null' src="../../../static/images/userImg.png" alt='' />
            </form>
          </div>
          <img class="userjintou" src="../../../static/images/jiantou_gray.png" alt />
        </div>
      </div>
      <div class="everyBlockBgcolor everyPadding displayFlex updateBox">
        <div class="displayFlex updateNickName">
          <div class="displayFlex title">
            <span>修改昵称</span>
            <span class="star">*</span>
          </div>
          <div class="displayFlex justBetween inputBox">
            <input type="text" v-model="userInfo.nickname" placeholder="请输入昵称" />
          </div>
        </div>
      </div>
      
      <div class="everyBlockBgcolor everyPadding personBox">
        <div class="displayFlex updateBox">
          <div class="displayFlex updateNickName">
            <div class="displayFlex title">
              <span>姓名</span>
              <span class="star">*</span>
            </div>
            <div class="displayFlex justBetween inputBox">
              <input type="text" v-model="userInfo.username" placeholder="请输入你的姓名" />
            </div>
          </div>
        </div>
        <div class="displayFlex updateBox">
          <div class="displayFlex updateNickName">
            <div class="displayFlex title">
              <span>微信号</span>
            </div>
            <div class="displayFlex justBetween inputBox">
              <input type="text" v-model="userInfo.wx_number" placeholder="请输入您的微信号" />
            </div>
          </div>
        </div>
        <div class="displayFlex updateBox">
          <div class="displayFlex updateNickName justBetween">
            <div class="displayFlex title">
              <span>出生日期</span>
            </div>
            <div class="displayFlex timeBox">
              <datetime
                v-model="userInfo.birth_date"
                style="border: none;width: 100%;padding:0;margin:0"
                @on-change="changeBirth_date"
                clear-text="clear"
                @on-clear="clearValue"
              >
                <div class="displayFlex justBetween dateBox">
                  <input type="text" v-model="userInfo.birth_date" placeholder="请请选择出生日期" />
                  <img class="userjintou" src="../../../static/images/jiantou_gray.png" alt />
                </div>
              </datetime>
            </div>
          </div>
        </div>
        <div class="displayFlex updateBox">
          <div class="displayFlex updateNickName justBetween">
            <div class="displayFlex title">
              <span>所在城市</span>
            </div>
            <div class="displayFlex justBetween inputBox">
              <div class="displayFlex  cityBox">
                <x-address  title='' clear-text="clear"
                 @on-shadow-change='changeCity' v-model="areaValue" placeholder="请选择您所在的城市" :list="addressData" value-text-align='left' style='width: 100%;height:100%;line-height: 1rem;'></x-address>
              </div>
              <img class="userjintou" src="../../../static/images/jiantou_gray.png" alt='' />
            </div>
          </div>
        </div>
        
        <div class="displayFlex updateBox">
          <div class="displayFlex updateNickName">
            <div class="displayFlex title">
              <span>活跃区域</span>
            </div>
            <div class="displayFlex justBetween inputBox">
              <input type="text" v-model="userInfo.active_region" placeholder="请输入您活跃的区域" />
            </div>
          </div>
        </div>
        <div class="displayFlex updateBox">
          <div class="displayFlex updateNickName">
            <div class="displayFlex title">
              <span>期待爆品</span>
            </div>
            <div class="displayFlex justBetween inputBox">
              <input type="text" v-model="userInfo.hot_goods_name" placeholder="请输入您期待的爆品" />
            </div>
          </div>
        </div>
        <div class="displayFlex updateBox">
          <div class="displayFlex updateNickName">
            <div class="displayFlex title">
              <span>我的职业</span>
            </div>
            <div class="displayFlex justBetween inputBox">
              <input type="text" v-model="userInfo.occupation" placeholder="请输入您的职业" />
            </div>
          </div>
        </div>
      </div>

      <div class="btnsave" @click="btnSave">保存</div>
    </div>
  </div>
</template>

<script>
import headerT from "@/components/header";
import {
  areaList,
  userInfo,
  userEdit,
  areaListPicker,
  upload
} from "@/services/personCenter";
import {
  Group,
  Datetime,
  XAddress,
  ChinaAddressV4Data,
  PopupPicker
} from "vux";
export default {
  components: {
    headerT,
    Group,
    Datetime,
    XAddress,
    PopupPicker,
  },
  name: "",

  data() {
    return {
      areaValue: [], //省市区的值
      addressData: ChinaAddressV4Data,
      userInfo: {
        img: "", //图片
        nickname: "", //昵称
        username: "", //姓名
        wx_number: "", //微信号码
        birth_date: "", //出生日期
        city: "", //省
        city_num:'',
        district: "", //市
        district_num:'',
        country: "", //区
        country_num:'',
        hot_goods_name: "", //期待爆品
        active_region: "", //活跃区域
        occupation: "" //职业
      }, //个人信息

      citysNum:[],//省市区ids
      citysName:[],//省市区值

    };
  },
  created() {
    this.getUserInfo();
  },
  watch: {},

  methods: {
    changeCity(ids, names){
      this.citysNum=ids
      this.citysName=names
    },
     
     //上传图片
    onchangeImgFun(e) {
      let formdata=new FormData();
      formdata.append("file[]", $("#file")[0].files[0]);
      this.$post(upload, formdata).then(res => {
        this.userInfo.img=res.data[0]
        $("#file").val('')
      }).catch(err=>{
        console.log(err)
      })
    },
    
    //编辑个人资料
    btnSave() {
      if (this.userInfo.nickname == "") {
        this.$vux.toast.text("请输入昵称！", "top");
        return;
      }
      if (this.userInfo.username == "") {
        this.$vux.toast.text("请输入姓名！", "top");
        return;
      }
      let obj = {
        img: this.userInfo.img,
        nickname: this.userInfo.nickname,
        username: this.userInfo.username,
        wx_number: this.userInfo.wx_number,
        birth_date: this.userInfo.birth_date,
        hot_goods_name: this.userInfo.hot_goods_name,
        active_region: this.userInfo.active_region,
        occupation: this.userInfo.occupation
      };
      obj['city']=this.citysName[0]
      obj['district']=this.citysName[1]
      obj['country']=this.citysName[2]
      obj['city_num']=this.citysNum[0]
      obj['district_num']=this.citysNum[1]
      obj['country_num']=this.citysNum[2]

      this.$vux.loading.show({
        text: "Loading"
      });
      this.$post(userEdit, obj)
        .then(res => {
          this.$vux.loading.hide();
          if (res.code == 200) {
            this.$vux.toast.text("修改成功！", "top");
            this.getUserInfo()
          }
        })
        .catch(error => {
          this.$vux.loading.hide();
        });
    },
    //获取用户信息
    getUserInfo() {
      this.$post(userInfo).then(res => {
        this.areaValue=[]
        if (res.code == 200 && res.data != null) {
          // this.userInfo=res.data
          this.userInfo = {
            img: res.data.img, //图片
            nickname: res.data.nickname, //昵称
            username: res.data.username, //姓名
            wx_number: res.data.wx_number, //微信号码
            birth_date: res.data.birth_date, //出生日期
            city: res.data.city, //省
            district: res.data.district, //市
            country: res.data.country, //区
            hot_goods_name: res.data.hot_goods_name, //期待爆品
            active_region: res.data.active_region, //活跃区域
            occupation: res.data.occupation //职业
          };
          this.areaValue.push(res.data.city!=''?res.data.city:'',res.data.district!=''?res.data.district:'',res.data.country!=''?res.data.country:'')
          for(let i=0;i<this.areaValue.length;i++){
            if(!this.areaValue[i]){
              this.areaValue=[]
            }
          }
        }
      });
    },
     //获取生日值
    changeBirth_date(value) {},
    //清除日期值
    clearValue(value) {
      this.userInfo.birth_date = "";
    },

  }
};
</script>

<style lang="less" rel="stylesheet/less" type="text/css" scoped>
@colorRed: #f64135;
@fontsize32: 0.32rem;
.distpickerBox{
  border: 1px solid red;
  height: 1.58rem;
  /deep/ .distpicker-address-wrapper{
    display: flex;
   select{
     width: 30%;
     height: 0.6rem;
      margin-right: 3%;
   }
  }
  
}
  
#headBox {
  .everyPadding {
    padding: 0 0.34rem;
  }
  .justBetween {
    justify-content: space-between;
  }
  .userjintou {
    width: 0.17rem;
    height: 0.33rem;
  }
  .boxMain {
    font-size: 0.34rem;
    color: #4e4e4e;
    .headImg {
      height: 2.02rem;
      justify-content: space-between;
      .userImgBox {
        img {
          display: block;
        }
        .userImg {
          width: 1.38rem;
          height: 1.38rem;
          margin-right: 0.71rem;
          border-radius: 50%;
        }
      }
    }
    .updateBox {
      margin: 0.25rem 0;
      // padding: 0 0.34rem;
      height: 1.58rem;
      justify-content: space-between;
      .updateNickName {
        width: 100%;

        .star {
          color: @colorRed;
        }
        .title {
          justify-content: space-between;
          width: 1.7rem;
        }
        .inputBox {
          height: 1.2rem;
          width: calc(~"100% - 1.7rem");
          input {
            width: calc(~"100% - 0.5rem");
            margin: 0 0.2rem;
            height: 1rem;
            border: none;
          }
        }
      }
    }
    .personBox {
      .updateBox {
        height: 1.6rem;
        border-bottom: 1px solid #f6f6f6;
        // margin: 0.25rem 0.12rem;

        .timeBox {
          width: calc(~"100% - 1.7rem");
          .dateBox {
            width: 100%;
            input {
              width: calc(~"100% - 0.5rem");
              margin: 0 0.2rem;
              height: 1rem;
              border: none;
            }
          }
        }
      }
      .cityBox {
        height: 1rem;
        margin: 0;
        
        width:calc(~'100% - 0.5rem');
        // border-bottom: 1px solid #f6f6f6;
        /deep/ .weui-cell{
          padding:0 0;
        }
        /deep/ .weui-cell__ft:after{
            display:none;
        }
      }
    }
  }

  .btnsave {
    height: 1.13rem;
    background: linear-gradient(
      90deg,
      rgba(246, 65, 53, 1) 0%,
      rgba(255, 205, 88, 1) 100%
    );
    box-shadow: 0rem 0rem 0rem rgba(255, 112, 79, 0.4);
    border-radius: 1rem;
    font-size: 0.39rem;
    color: #ffffff;
    text-align: center;
    line-height: 1.13rem;
    font-weight: bold;
    margin: 0.91rem 0.89rem;
  }
}

.user-header {
  position: relative;
  display: inline-block;
  
  .user-header-com {
    width: 1.38rem;
    height: 1.38rem;
    border-radius: 50%;
    display: inline-block;
    margin-right: 0.71rem;
  }
  .header-upload-btn {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    opacity: 0;
  }
}
</style>
